import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Form, Input } from 'antd';

export default function AccountLogin(props) {
  const { getAccountForm, userInfo } = props;
  const { username, password } = userInfo;
  const [form] = Form.useForm();
  const onFieldsChange = () => {
    // console.log(form.getFieldValue());
    getAccountForm(form.getFieldValue());
  };
  const accountValidator = (_, val) => {
    if (!val.trim()) {
      return Promise.reject('账号不能为空');
    } else if (!/^[\u4e00-\u9fa5]{2,4}$/.test(val.trim())) {
      return Promise.reject('请输入2-4字的中文账号名');
    } else {
      return Promise.resolve();
    }
  };
  return (
    <Form form={form} name='account_login' className='login-form' onFieldsChange={onFieldsChange} size='large' initialValues={{ username, password }}>
      <Form.Item
        name='username'
        hasFeedback
        rules={[
          {
            validator: accountValidator,
          },
        ]}>
        <Input prefix={<UserOutlined className='site-form-item-icon' />} placeholder='账号' />
      </Form.Item>
      <Form.Item
        name='password'
        hasFeedback
        rules={[
          {
            required: true,
            message: '请输入密码',
          },
        ]}>
        <Input.Password prefix={<LockOutlined className='site-form-item-icon' />} type='password' placeholder='密码' />
      </Form.Item>
    </Form>
  );
}
